<!--
 * @Description: 第三十七章（unocss原子化）
 * @Author: IA ia@kepro.space
 * @Date: 2025-02-23 03:00:36
-->
<template>

<div>
  <h1>第三十七章（unocss原子化）</h1>
  <div>
    <h2>静态</h2>
    <div class="flex red">
      静态unocss显示
    </div>
  </div>
  <hr />
  <div>
    <h2>动态</h2>
    <div class="m-1">
      动态unocss显示
    </div>
  </div>
  <hr />
  <div>
    <h2>短语</h2>
    <div class="cike">
      短语unocss显示
    </div>
  </div>
  <hr />
  <div>
    <h2>预设</h2>
    <div>
      预设的图标 presetIcons 使用iconify
      <div class="i-ic-baseline-alarm-on"></div>
    </div>
    <div>
      预设的属性美化 presetAttributify
      <div m="1" flex red>
        class="m-1" 可以这样写 m="1"
      </div>
    </div>
    <div>
      预设的tailwindcss presetWind3
      <div class="bg-red-500">
        presetUno 弃用了，改用 presetWind3
      </div>
    </div>
  </div>
</div>

</template>
<script setup lang="ts">

</script>
<style scoped>

</style>
